<template>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th>商品类目id</th>
        <th>商品类目名</th>
        <th>商品类目描述</th>
        <th>所属者</th>
        <th>所属主类目</th>
        <th>热度</th>
        <th>操作</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="i in list">

        <td @dblclick="dbGoodsCategoryClick(i)">
          {{i.id}}
        </td>

        <td>
          <input type="text"
                 v-model="i.name"
                 :disabled="isGoodsCategoryDisabled || clickGoodsCategoryId !== i.id"
                 @blur="inputBlurGoodsCategoryUpdate(i)">
        </td>

        <td>
          <textarea :disabled="isGoodsCategoryDisabled || clickGoodsCategoryId !== i.id" v-model="i.describe">
          </textarea>
        </td>

        <td>{{i.user_username}}</td>

        <td>
          <select v-model="i.root_category_id" :disabled="isGoodsCategoryDisabled || clickGoodsCategoryId !== i.id">
            <option v-for="j in rootNavs" :value="j.id">{{j.name}}</option>
          </select>
        </td>
        <td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" disabled v-model="i.index"></td>
        <td><span class="delete" @click="goodsCategoryDeleteClick(i)">删除</span></td>
      </tr>

    </tbody>

  </table>
</template>

<script>
  import {deleteRootCategory, updateRootCategory} from 'network/admin'
  import {deleteGoodsCategory, updateGoodsCategory} from 'network/mix'
  export default {
    inject: ['reload'],
    name: "Table",
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      },
      rootNavs: { // root主类目
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      return {
        isGoodsCategoryDisabled: true, // 能否修改
        clickGoodsCategoryId: 0, // 双击商品类目的id号,与isDisabled配合,实现使双击的id商品类目展示

      }
    },
    methods: {
      dbGoodsCategoryClick(goods_category) { // 双击商品类目id
        // console.log(category.id);
        this.isGoodsCategoryDisabled = false
        this.clickGoodsCategoryId = goods_category.id;

        // console.log(this.rootNavs);

        this.$mes_ty_toast.toShow('正在修改id为' + goods_category.id + '名为' + goods_category.name + '商品类目的信息,若需要修改类目名,建议最后修改', 5000)
      },

      inputBlurGoodsCategoryUpdate(goodsCategory) { // 商品类目失焦点,进行更改
        this.clickGoodsCategoryId = true

        let id = goodsCategory.id
        let user_username = goodsCategory.user_username

        let name = goodsCategory.name
        let describe = goodsCategory.describe
        let root_category_id = goodsCategory.root_category_id
        let index = goodsCategory.index

        let goods_category = {
          id,
          name,
          describe,
          root_category_id,
          user_username,
          index,
        }
        // 进行更新商品类目
        updateGoodsCategory(goods_category)
          .then(res => {
            // console.log(res);
            this.$succ_ty_toast.toShow('修改id为' + goods_category.id + '商品类目成功', 5000)
          })
        .catch(error => {
          console.log(error);
          this.$err_ty_toast.toShow('修改id为' + goods_category.id + '商品类目失败', 2000)
        })

        // console.log('goodsCategory=' + goods_category);
        // console.log(goods_category);
      },
      goodsCategoryDeleteClick(goodsCategory) { // 删除商品类目
        if (confirm('确认删除id为' + goodsCategory.id + '名称为' + goodsCategory.name + '的商品类目吗?')) {
          deleteGoodsCategory(goodsCategory.id)
            .then(res => {
              // console.log(res);
              this.reload(); // 刷新当前页面
              this.$succ_ty_toast.toShow('删除id为' + goodsCategory.id + '的商品类目成功', 5000);
            })
            .catch(error => {
              console.log(error);
              this.$err_ty_toast.toShow('删除id为' + goodsCategory.id + '的商品类目失败！！！', 2000);
            })
        }
      },

    }
  }
</script>

<style scoped>
  table thead tr {
    height: 50px;

    /*background-color: red;*/
  }
  table thead tr th { /*设置表头下划线*/
    border-bottom: 2px solid #cdcdcd;

    /*background-color: red;*/
  }
  table tbody tr {
    text-align: center;
    height: 50px;
    background-color: #fff;
  }
  table tbody tr td {
    border-bottom: 1px dashed #cdcdcd;

    /*background-color: red;*/
  }
  table tbody tr td img {
    height: 30px;
  }
  table tbody tr td span {
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px 10px;

    color: white;
    border-radius: 6px;
    /*background-color: red;*/
  }
  table tbody tr td span:hover {
    opacity: 0.75;
    cursor: pointer;
  }
  table tbody tr td .delete {
    background-color: red;
  }
  table tbody tr td .alter {
    background-color: green;
  }

  td input {
    text-align: center;
    border: none;
    outline: none;
    font-size: 18px;
    background-color: #fff;

    /*background-color: yellow;*/
  }
  td textarea {
    text-align: center;
    border: none;
    outline: none;
    font-size: 16px;

    background-color: #fff;
  }
  td select {
    width: 100px;
  }

  .go {
    color: black;
    font-weight: bold;
    font-size: 20px;
    /*background-color: yellow;*/
  }
</style>